<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
	  <!--
        <script src="https://unpkg.com/vue@next"></script>
        -->
	  <script type="text/javascript" src="../js/vue3.2.36/vue.js"></script>
	  <!-- import CSS -->
	  <!--
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    -->
	  <link rel="stylesheet" href="../js/element-plus2.2.28/index.css"></link>
	  <!-- import JavaScript -->
	  <!--
    <script src="https://unpkg.com/element-plus"></script>
    -->
	  <script type="text/javascript" src="../js/element-plus2.2.28/index.full.min.js"></script>
	  <script type="text/javascript" src="../js/jquery.min.js"></script>
    <title>表单编辑</title>
	  <style>
		  html,body{
			  padding:0;
			  margin:0;
		  }
	  </style>
  </head>
  <body>
    <div id="app" style="height:100%;">
	  <el-button type="primary" @click="onSubmit" style="position:fixed;bottom:10px;right:10px;z-index:999;" >保存</el-button>
	  <el-tabs class="demo-tabs" model-value="basic" >
		<el-tab-pane label="基本信息" name="basic">
			<el-form :model="page" ref="page" :rules="rules" label-width="120px"  >
				<el-row>
					<el-col :span="6">
						<el-form-item label="编号"  prop="code">
							<el-input v-model="page.code" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="名称"  prop="name">
							<el-input v-model="page.name" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="排序">
							<el-input v-model="page.orderBy" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="页面类型">
							<el-select v-model="page.pageType" style="width:100%" placeholder="默认为列表" >
								<el-option label="列表" value="list"  ></el-option>
								<el-option label="树" value="tree"  ></el-option>
							</el-select>
						</el-form-item>

					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="名称字段">
							<el-input v-model="page.labelField" placeholder="用于选择器的名称展示" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="值字段">
							<el-input v-model="page.valueField" placeholder="用于选择器的值" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="开启分页">
							<el-select v-model="page.openPage" style="width:100%"  placeholder="默认开启分页" >
								<el-option label="YES" value="YES" ></el-option>
								<el-option label="NO" value="NO" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="开启序号">
							<el-select v-model="page.openRowNum" style="width:100%"  placeholder="默认不开启序号" >
								<el-option label="YES" value="YES" ></el-option>
								<el-option label="NO" value="NO" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="前置接口">
							<el-input v-model="page.beforeApi" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="查询后接口">
							<el-input v-model="page.afterQueryApi" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="页面宽度">
							<el-input v-model="page.width" placeholder="一对多页面占比左侧宽度,最大为12,默认值为6" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="每页数量">
							<el-select v-model="page.perPage" style="width:100%;"  placeholder="默认为10" >
								<el-option label="5" value="5" ></el-option>
								<el-option label="10" value="10" ></el-option>
								<el-option label="20" value="20" ></el-option>
								<el-option label="50" value="50" ></el-option>
								<el-option label="100" value="100" ></el-option>
								<el-option label="300" value="300" ></el-option>
								<el-option label="500" value="500" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">

					</el-col>
				</el-row>

				<el-form-item label="查询sql" prop="querySql" >
					<div class='el-textarea'>
						<textarea class='el-textarea__inner'  v-model.lazy="page.querySql" style="height:300px;"></textarea>
					</div>
				</el-form-item>
				<el-form-item label="扩展json" prop="extraJson" >
					<div class='el-textarea'>
						<textarea class='el-textarea__inner'  v-model.lazy="page.extraJson" style="height:300px;"></textarea>
					</div>
				</el-form-item>
				<el-form-item label="页面介绍" prop="introduce" >
					<div class='el-textarea'>
						<textarea class='el-textarea__inner'  v-model.lazy="page.introduce" style="height:100px;"></textarea>
					</div>
				</el-form-item>

			  </el-form>
		</el-tab-pane>
		<el-tab-pane label="查询结果配置" name="resultFields"  >
			<!--
			<el-button type="primary" @click="onAddResultField">添加</el-button>
			-->
			<el-button type="primary" @click="onReload">加载字段</el-button>
			<el-table :data="page.resultFields"  border height="500" >
				<el-table-column fixed prop='seq' sortable   label="序号" width="200" >
					<template  #default="scope">
						<el-input-number v-model="scope.row.seq" style="width:150" :step="10" />
					</template>
				</el-table-column>
				<el-table-column fixed  label="字段" width="200" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;" >
								<input class="el-input__inner"  style="width:100%;" disabled v-model.lazy="scope.row.field" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="名称" width="180" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper">
								<input class="el-input__inner" v-model.lazy="scope.row.label" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="宽度" width="100" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper">
								<input class="el-input__inner" v-model.lazy="scope.row.width" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="字段类型" width="160" >
					<template  #default="scope">
						<el-select v-model="scope.row.type" placeholder="请选择" clearable  >
							<el-option label="字符串" value="string"  ></el-option>
							<el-option label="数据字典" value="dic" ></el-option>
							<el-option label="日期" value="date" ></el-option>
							<el-option label="短整数" value="int" ></el-option>
							<el-option label="长整数" value="long" ></el-option>
							<el-option label="小数" value="double" ></el-option>
							<el-option label="图片" value="image" ></el-option>
							<el-option label="文件" value="file" ></el-option>
							<el-option label="tpl模板" value="tpl" ></el-option>
							<el-option label="长文本" value="long-string"  ></el-option>
							<el-option label="超长文本" value="big-string"  ></el-option>
							<el-option label="SQL" value="sql"  ></el-option>
							<el-option label="js脚本" value="js" ></el-option>
							<el-option label="文章" value="article" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="格式化" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.format" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否隐藏" width="100"   >
					<template  #default="scope">
						<el-select v-model="scope.row.hidden"  placeholder="请选择" clearable >
							<el-option label="YES" value="YES" ></el-option>
							<el-option label="NO" value="NO" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="是否展示" width="100"   >
					<template  #default="scope">
						<el-select v-model="scope.row.toggled"  placeholder="配置为展示,需要在选择列哪里勾选" clearable >
							<el-option label="YES" value="YES" ></el-option>
							<el-option label="NO" value="NO" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="冻结位置" width="100"   >
					<template  #default="scope">
						<el-select v-model="scope.row.fixed"  placeholder="请选择" clearable >
							<el-option label="左侧" value="left" ></el-option>
							<el-option label="右侧" value="right" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="扩展json" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.extraJson" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="统计标签" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner' placeholder="tpl模板"  v-model.lazy="scope.row.statisticsLabel" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="统计sql" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.statisticsSql" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<!--
				<el-table-column fixed="right" label="操作" width="200" >
					<template  #default="{row,column,$index}">
						<el-button type="primary" @click="onAddResultField(row,$index)">添加</el-button>
						<el-button type="primary" @click="onDeleteResultField(row,$index)">删除</el-button>
					</template>
				</el-table-column>
				-->
			</el-table>
		</el-tab-pane>
		<el-tab-pane label="查询条件" name="queryFields"  >
			  <el-button type="primary" @click="onAddQueryField">添加</el-button>
			  <el-table :data="page.queryFields"  border height="500" >
				  <el-table-column fixed prop='seq' sortable   label="序号" width="200" >
					  <template  #default="scope">
						  <el-input-number v-model="scope.row.seq" style="width:150" :step="10" />
					  </template>
				  </el-table-column>
				  <el-table-column fixed  label="字段" width="200" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper" style="width:100%;">
								  <input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.field" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column  label="名称" width="180" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper">
								  <input class="el-input__inner" v-model.lazy="scope.row.label" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="操作类型" width="160" >
					  <template  #default="scope">
						  <el-select v-model="scope.row.opt" placeholder="请选择" clearable  >
							  <el-option label="等于" value="eq"  ></el-option>
							  <el-option label="不等于" value="notEq" ></el-option>
							  <el-option label="等于多值" value="in" ></el-option>
							  <el-option label="不等于多值" value="notIn" ></el-option>
							  <el-option label="包含" value="like" ></el-option>
							  <el-option label="包含多值" value="likeIn" ></el-option>
							  <el-option label="不包含" value="notLike" ></el-option>
							  <el-option label="不包含多值" value="notLikeIn"  ></el-option>
							  <el-option label="范围" value="betweenAnd"  ></el-option>
							  <el-option label="小于" value="less"  ></el-option>
							  <el-option label="小于等于" value="lessEq" ></el-option>
							  <el-option label="大于" value="large" ></el-option>
							  <el-option label="大于等于" value="largeEq" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="默认值" width="200" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper">
								  <input class="el-input__inner" v-model.lazy="scope.row.value" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="数据类型" width="160" >
					  <template  #default="scope">
						  <el-select v-model="scope.row.type" placeholder="请选择" clearable  >
							  <el-option label="字符串" value="string"  ></el-option>
							  <el-option label="数据字典" value="dic" ></el-option>
							  <el-option label="日期" value="date" ></el-option>
							  <el-option label="短整数" value="int" ></el-option>
							  <el-option label="长整数" value="long" ></el-option>
							  <el-option label="小数" value="double" ></el-option>
							  <el-option label="选择器" value="selector" ></el-option>
							  <el-option label="长文本" value="long-string"  ></el-option>
							  <el-option label="超长文本" value="big-string"  ></el-option>
							  <el-option label="SQL" value="sql"  ></el-option>
							  <el-option label="js脚本" value="js" ></el-option>
							  <el-option label="文章" value="article" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="是否隐藏" width="100"   >
					  <template  #default="scope">
						  <el-select v-model="scope.row.hidden"  placeholder="请选择" clearable >
							  <el-option label="YES" value="YES" ></el-option>
							  <el-option label="NO" value="NO" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="是否必填" width="100"   >
					  <template  #default="scope">
						  <el-select v-model="scope.row.must" placeholder="请选择" clearable >
							  <el-option label="YES" value="YES" ></el-option>
							  <el-option label="NO" value="NO" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="是否关联字段" width="140"   >
					  <template  #default="scope">
						  <el-select v-model="scope.row.ref" placeholder="请选择" clearable >
							  <el-option label="YES" value="YES" ></el-option>
							  <el-option label="NO" value="NO" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>


				  <el-table-column label="宽度" width="140" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper">
								  <input class="el-input__inner" v-model.lazy="scope.row.width" placeholder="宽度1~12" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="格式化" width="300" >
					  <template  #default="scope">
						  <div class='el-textarea'>
							  <textarea class='el-textarea__inner'  v-model.lazy="scope.row.format" style="height:80px;"></textarea>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="组件类型" width="180"  >
					  <template  #default="scope">
						  <el-select v-model="scope.row.componentType" filterable  placeholder="请选择" clearable >
							  <el-option label="文本框" value="input-text" ></el-option>
							  <el-option label="多行文本" value="textarea" ></el-option>
							  <el-option label="下拉框" value="select" ></el-option>
							  <el-option label="复选框" value="checkboxes" ></el-option>
							  <el-option label="数字" value="input-number" ></el-option>
							  <el-option label="单选框" value="radios" ></el-option>
							  <el-option label="静态展示" value="static" ></el-option>
							  <el-option label="日期" value="input-date" ></el-option>
							  <el-option label="选择器-弹出" value="selector-pop" ></el-option>
							  <el-option label="选择器" value="selector" ></el-option>
							  <el-option label="日期时间" value="input-datetime" ></el-option>
							  <el-option label="地理位置" value="location-picker" ></el-option>
							  <el-option label="密码框" value="input-password" ></el-option>
							  <el-option label="富文本编辑器" value="input-rich-text" ></el-option>
							  <el-option label="开关" value="switch" ></el-option>
							  <el-option label="日期范围" value="input-date-range" ></el-option>
							  <el-option label="省市选择" value="input-province_city" ></el-option>
							  <el-option label="省市区/县" value="input-province-city-county" ></el-option>
							  <el-option label="省份选择" value="input-province" ></el-option>
							  <el-option label="excel解析" value="input-excel" ></el-option>
							  <el-option label="日期时间范围" value="input-datetime-range" ></el-option>
							  <el-option label="颜色选择" value="input-color" ></el-option>
							  <el-option label="月份" value="input-month" ></el-option>
							  <el-option label="月份范围" value="input-month-range" ></el-option>
							  <el-option label="时间" value="input-time" ></el-option>
							  <el-option label="时间范围" value="input-time-range" ></el-option>
							  <el-option label="年" value="input-year" ></el-option>
							  <el-option label="年范围" value="input-year-range" ></el-option>
							  <el-option label="季度" value="input-quarter" ></el-option>
							  <el-option label="季度范围" value="input-quarter-range" ></el-option>
							  <el-option label="图片" value="input-image" ></el-option>
							  <el-option label="文件上传" value="input-file" ></el-option>
							  <el-option label="评分" value="input-rating" ></el-option>
							  <el-option label="滑块选择" value="input-range" ></el-option>
							  <el-option label="重复率选择器" value="input-repeat" ></el-option>
							  <el-option label="标签选择器" value="input-tag" ></el-option>
							  <el-option label="按钮点选" value="button-group-select" ></el-option>
							  <el-option label="公式" value="formula" ></el-option>
							  <el-option label="编辑器" value="editor" ></el-option>
							  <el-option label="公式编辑器" value="input-formula" ></el-option>
							  <el-option label="选择树" value="input-tree" ></el-option>
							  <el-option label="下拉树" value="tree-select" ></el-option>
							  <el-option label="表格InputTable" value="input-table" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>

				  <el-table-column label="是否多选" width="100"   >
					  <template  #default="scope">
						  <el-select v-model="scope.row.multi"  placeholder="请选择" clearable>
							  <el-option label="YES" value="YES" ></el-option>
							  <el-option label="NO" value="NO" ></el-option>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="日期表达式" width="300" >
					  <template  #default="scope">
						  <div class='el-textarea'>
							  <textarea class='el-textarea__inner'  v-model.lazy="scope.row.dateExpress" style="height:80px;"></textarea>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="标签提示" width="300" >
					  <template  #default="scope">
						  <div class='el-textarea'>
							  <textarea class='el-textarea__inner'  v-model.lazy="scope.row.labelRemark" style="height:80px;"></textarea>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="选项sql" width="300" >
					  <template  #default="scope">
						  <div class='el-textarea'>
							  <textarea class='el-textarea__inner'  v-model.lazy="scope.row.optionSql" style="height:80px;"></textarea>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column label="扩展json" width="300" >
					  <template  #default="scope">
						  <div class='el-textarea'>
							  <textarea class='el-textarea__inner'  v-model.lazy="scope.row.extraJson" style="height:80px;"></textarea>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column fixed="right" label="操作" width="200" >
					  <template  #default="{row,column,$index}">
						  <el-button type="primary" @click="onAddQueryField(row,$index)">添加</el-button>
						  <el-button type="primary" @click="onDeleteQueryField(row,$index)">删除</el-button>
					  </template>
				  </el-table-column>
			  </el-table>
		</el-tab-pane>
		<el-tab-pane label="页面按钮" name="pageButton">
			<el-button type="primary" @click="onAddButton">添加</el-button>
			<el-table :data="page.pageButtons"  border  style="width: 100%" height="500">
				<el-table-column fixed prop='seq' sortable   label="序号" width="200" >
					<template  #default="scope">
						<el-input-number v-model="scope.row.seq" style="width:150" :step="10" />
					</template>
				</el-table-column>
				<el-table-column  label="名称" fixed width="180" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper">
								<input class="el-input__inner" v-model.lazy="scope.row.label" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="编号" width="180" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper">
								<input class="el-input__inner" v-model.lazy="scope.row.code" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="按钮位置" width="200" >
					<template  #default="scope">
						<el-select v-model="scope.row.buttonLocation" placeholder="请选择" clearable  >
							<el-option label="顶部" value="top"  ></el-option>
							<el-option label="批量操作" value="bulk"  ></el-option>
							<el-option label="行按钮" value="row"  ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="操作类型" width="200" >
					<template  #default="scope">
						<el-select v-model="scope.row.optionType" placeholder="请选择" clearable  >
							<el-option label="弹出表单" value="form"  ></el-option>
							<el-option label="弹出Iframe" value="iframe"  ></el-option>
							<el-option label="弹出页面" value="page"  ></el-option>
							<el-option label="请求" value="ajax"  ></el-option>
							<el-option label="打开新窗口" value="openNew" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="操作配置" width="400" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner' placeholder="表单:配置表单编号
iframe:配置url地址,可携带参数url?id=${id}&pageCode=${code}
弹出页面:配置页面编码,关联字段或者页面编号?关联字段1=${值字段1}&关联字段2=${值字段2}
请求:get:/xxx?id=${id}&name=${xxx}
post:/xxx(会携带)requestBody参数
打开新窗口:配置url地址
批量操作可以携带url?ids=${ids}参数
"  v-model.lazy="scope.row.optionValue" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="图标" width="180" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper">
								<input class="el-input__inner" v-model.lazy="scope.row.icon" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="样式" width="140" >
					<template  #default="scope">
						<el-select v-model="scope.row.level" placeholder="请选择" clearable  >
							<el-option label="默认" value="default"  ></el-option>
							<el-option label="链接" value="link"  ></el-option>
							<el-option label="主要" value="primary"  ></el-option>
							<el-option label="次要" value="secondary"  ></el-option>
							<el-option label="信息" value="info" ></el-option>
							<el-option label="成功" value="success" ></el-option>
							<el-option label="警告" value="warning" ></el-option>
							<el-option label="危险" value="danger" ></el-option>
							<el-option label="高亮" value="light" ></el-option>
							<el-option label="黑暗" value="dark" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="添加到更多" width="140" >
					<template  #default="scope">
						<el-select v-model="scope.row.addToMore" placeholder="请选择" clearable  >
							<el-option label="YES" value="YES"  ></el-option>
							<el-option label="NO" value="NO"  ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="二次确认提示" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.confirmText" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否提示" width="200" >
					<template  #default="scope">
						<el-select v-model="scope.row.whetherConfirm" placeholder="默认提示" clearable  >
							<el-option label="YES" value="YES"  ></el-option>
							<el-option label="NO" value="NO"  ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="禁用规则" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.jsRule" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="弹出前接口" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.beforePopApi" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="扩展json" width="300" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner'  v-model.lazy="scope.row.extraJson" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" >
					<template  #default="{row,column,$index}">
						<el-button type="primary" @click="onAddButton(row,$index)">添加</el-button>
						<el-button type="primary" @click="onDeleteButton(row,$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-tab-pane>
		<el-tab-pane label="页面关联" name="pageRef">
			<el-button type="primary" @click="onAddRef">添加</el-button>
			<el-table :data="page.pageRefs"  border  style="width: 100%" height="500">
				<el-table-column fixed prop='seq' sortable   label="序号" width="200" >
					<template  #default="scope">
						<el-input-number v-model="scope.row.seq" style="width:150" :step="10" />
					</template>
				</el-table-column>
				<el-table-column label="关联类型" width="140" >
					<template  #default="scope">
						<el-select v-model="scope.row.refType" placeholder="请选择" clearable  >
							<el-option label="页面" value="page"  ></el-option>
							<el-option label="表单" value="form"  ></el-option>
							<el-option label="iframe" value="iframe"  ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column  label="关联配置" >
					<template  #default="scope">
						<div class='el-textarea'>
							<textarea class='el-textarea__inner' placeholder="类型为页面:配置页面编号
表单:配置表单编号
iframe:配置url地址携带参数?key=${value}"  v-model.lazy="scope.row.refPageCode" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="关联字段"  >
					<template  #default="scope" >
						<div class='el-textarea'>
							<textarea class='el-textarea__inner' placeholder="例子:parentId=${id}&parentCode=${dicCode}"  v-model.lazy="scope.row.refField" style="height:80px;"></textarea>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="名称"  >
					<template  #default="scope" >
						<div class='el_input' style="width:100%;">
							<div class="el-input__wrapper" style="width:100%;">
								<input class="el-input__inner" v-model.lazy="scope.row.refName" style="width:100%;" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" >
					<template  #default="{row,column,$index}">
						<el-button type="primary" @click="onAddRef(row,$index)">添加</el-button>
						<el-button type="primary" @click="onDeleteRef(row,$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-tab-pane>
	  </el-tabs>

    </div>
    <script>
		let tableHeight = $(window).height() -90;
		$("el-table").attr("height",tableHeight);
		// 获取页面 url 参数
		$.getUrlParam = function (name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return '';
		}
      const App = {
        data() {
		  let page = {
			resultFields:[],
			queryFields:[],
			pageButtons:[],
			pageRefs:[]
		  };
          return {
			page:page,
			rules:{
				name:[{required:true,trigger: 'change',message:"必填"}],
				code:[{required:true,trigger: 'change',message:"必填"}],
				querySql:[{required:true,trigger: 'change',message:"必填"}],
			}
          };
        },
		mounted(){
        	let me = this;
			let id = $.getUrlParam("id");
			let type = $.getUrlParam("type");
			let url = "";
			if(type === 'copy'){
				url = "/admin/page/copyPage?id="+id;
			}else{
				url = "/admin/page/get?id="+$.getUrlParam("id");
			}
			$.ajax({
				type:"get",
				url:url,
				dataType: 'json',
				success:function(data){
					//console.info(data);
					if(data.status !== 0){
						ElementPlus.ElMessage(data.msg)
					}else{
						me.page = data.data;
						me.reSeq(me.page.resultFields);
						me.reSeq(me.page.queryFields);
						me.reSeq(me.page.pageRefs);
						me.reSeq(me.page.pageButtons);
					}
				}
			});
		},
		methods:{
			onSubmit(){
				let me = this;
				if(this.page.resultFields.length == 0){
					ElementPlus.ElMessage("请配置查询结果")
					return;
				}
				this.$refs.page.validate((valid,fields)=>{
					if(valid){
						$.ajax({
							type:"post",
							url:"/admin/page/save",
							contentType: "application/json;charset=UTF-8",
							processData: false,
							data:JSON.stringify(me.page),
							dataType: 'json',
							success:function(data){
								if(data.status !== 0){
									ElementPlus.ElMessage(data.msg)
								}else{
									parent.jQuery("*[data-tooltip='关闭']").get(0).click()
									parent.jQuery("*[type='submit']").get(0).click()
								}
							}
						});
					}else{
						ElementPlus.ElMessage("请填写必填信息")
					}

				});

			},
			onReload(){
				let me = this;
				if(this.page.querySql && this.page.querySql != ''){
					$.ajax({
						type:"post",
						url:"/admin/page/resultFields",
						contentType: "application/json;charset=UTF-8",
						processData: false,
						data:JSON.stringify(this.page),
						dataType: 'json',
						success:function(data){
							if(data.status !== 0){
								ElementPlus.ElMessage(data.msg)
							}else{
								me.page = data.data;
								me.reSeq(me.page.resultFields);
								me.reSeq(me.page.queryFields);
								me.reSeq(me.page.pageRefs);
								me.reSeq(me.page.pageButtons);
							}
						}
					});
				}else{
					ElementPlus.ElMessage("填写查询sql后才能加载字段")
				}
			},
			onDeleteResultField(row,index){
				this.deleteItem(this.page.resultFields,row,index,'resultField');
			},
			onAddResultField(row,index){
				this.pushArr(this.page.resultFields,row,index,'resultField');
			},
			onDeleteQueryField(row,index){
				this.deleteItem(this.page.queryFields,row,index,'queryField');
			},
			onAddQueryField(row,index){
				this.pushArr(this.page.queryFields,row,index,'queryField');
			},
			onDeleteButton(row,index){
				this.deleteItem(this.page.pageButtons,row,index,'button');
			},
			onAddButton(row,index){
				this.pushArr(this.page.pageButtons,row,index,'button');
			},
			onDeleteRef(row,index){
				this.deleteItem(this.page.pageRefs,row,index,'ref');
			},
			onAddRef(row,index){
				this.pushArr(this.page.pageRefs,row,index,'ref');
			},
			deleteItem(arr,row,index,type){
				arr.splice(index, 1);
				this.reSeq(arr);
			},
			pushArr(arr,row,index,type){
				let defaultObj = {
					"ref":{},
					"button":{},
					"resultField":{
						"type":"string",
						"hidden":"NO"
					},
					"queryField":{
						"type":"string",
						"opt":"like",
						"hidden":"NO",
						"disabled":"NO",
						"must":"NO"
					}
				};

				if(index){
					arr.splice(index+1,0,{
						seq:row.seq+5,
						...defaultObj[type]
					});
				}else{
					let seq = (arr.length+1)*10;
					if(arr.length>0){
						seq = arr[arr.length-1].seq + 10;
					}
					arr.push({
						seq:seq,
						...defaultObj[type]
					});
				}
				this.reSeq(arr);
			},
			reSeq(arr){
				for(let i=0;i<arr.length;i++){
					arr[i].seq = (i+1)*10;
				}
			}
		}

      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");


    </script>
  </body>
</html>
